<template>
  <div>
    <!-- 顶部设置条 -->
    <van-nav-bar>
      <template #right>
        <a href="">
          <div class="customer-service">
            <van-icon name="chat-o" size="28" style="margin-top: 7px;" />
            <p>客服</p>
          </div>
        </a>
        <a href="">
          <div class="set-up">
            <van-icon name="setting-o" size="28" style="margin-top: 7px;" />
            <p>设置</p>
          </div>
        </a>
      </template>
    </van-nav-bar>

    <!-- 用户登陆情况 -->
    <div class="user" v-if="id=1">
      <div class="user-img">
        <van-image
          round
          width="4rem"
          height="4rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="user-list">
        <p class="username">用户昵称</p>
        <p class="userphone">手机号码</p>
      </div>
    </div>
    <div class="user" v-else>
      <div class="user-img">
        <van-image
          round
          width="4rem"
          height="4rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="user-list">
        <p class="username">用户昵称</p>
        <p class="userphone">手机号码</p>
      </div>
    </div>

    <!-- 个人活动详情 -->
    <van-grid>
      <van-grid-item icon="underway" text="摆摊时长" to="" />
      <van-grid-item icon="star" text="信用等级" to="" />
      <van-grid-item icon="friends" text="我的组织" to="" />
      <van-grid-item icon="clock" text="在线时长" to="" />
    </van-grid>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#939699">
      <van-swipe-item>
        <img src="@/assets/index1.jpg" alt="" width="100%" height="100%">
      </van-swipe-item>
    </van-swipe>

    <!-- 公共组件宫格 -->
    <van-grid>
      <van-grid-item icon="manager" text="基本信息" to="" />
      <van-grid-item icon="goods-collect" text="已报名的活动" to="/enrolllist" />
      <van-grid-item icon="shop" text="我的商铺" to="" />
      <van-grid-item icon="comment" text="我的评论" to="" />
      <van-grid-item icon="todo-list" text="累计参加" to="" />
      <van-grid-item icon="coupon" text="我的活动" to="/activity-list" />
      <van-grid-item icon="add" text="我参与的活动" to="/partake" />
      <van-grid-item icon="service" text="帮助中心" to="" />
    </van-grid>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>
// 顶部设置条
.customer-service{
  width: 100%;
  font-size: 10px;
  display: flex;
  margin: auto;
}
.set-up{
  width: 100%;
  font-size: 10px;
  display: flex;
  margin: auto;
  margin-left: 10px;
}
// 用户信息框
.user{
  display: flex;
  background-color: #939699;
  // margin: auto;

  .user-img{
    width: 30%;
    // margin: auto;
    text-align: right;
    margin-top: 1.1rem;
  }
  .user-list{
    width: 60%;
    margin-left: 20px;
    .username{
      font-size: 18px;
      color: #000;
    }
    .userphone{
      font-size: 14px;
    }
  }
}
</style>